import { Connect } from 'dob-react';
import * as React from 'react';
import * as Styled from './index.style';
import * as typings from './index.type';

@Connect
class Crumbs extends React.Component<typings.Props, typings.State> {
  public static defaultProps = new typings.Props();

  public state = new typings.State();

  public render() {
    let childs: React.ReactElement<any>[];

    if (this.props.stores.ViewportStore.currentEditInstanceKey) {
      // 递归寻找这个组件父元素
      childs = this.props.actions.ViewportAction.getInstancePath(
        this.props.stores.ViewportStore.currentEditInstanceKey,
      ).map((instanceKey, index) => {
        const instance = this.props.stores.ViewportStore.instances.get(instanceKey);
        const componentClass = this.props.actions.ApplicationAction.getComponentClassByKey(instance.gaeaKey);
        const setting = this.props.actions.ApplicationAction.getSettingByInstance(instance);

        return (
          <Styled.FooterItem
            onClick={this.handleClick.bind(this, instanceKey)}
            onMouseOver={this.handleHover.bind(this, instanceKey)}
            key={index}
          >
            {setting.name}

            <Styled.rightIconContainer>
              <Styled.rightIcon />
            </Styled.rightIconContainer>
          </Styled.FooterItem>
        );
      });
    }

    return (
      <Styled.Container>
        <Styled.AutoWidthContainer onMouseLeave={this.handleMouseLeave}>{childs}</Styled.AutoWidthContainer>
      </Styled.Container>
    );
  }

  private handleClick(instanceKey: string) {
    this.props.actions.ViewportAction.setCurrentEditInstanceKey(instanceKey);
  }

  private handleHover(instanceKey: string) {
    this.props.actions.ViewportAction.setCurrentHoverInstanceKey(instanceKey);
  }

  private handleMouseLeave = () => {
    this.props.actions.ViewportAction.setCurrentHoverInstanceKey(null);
  };
}

export default {
  position: 'bottomBar',
  class: Crumbs,
};
